<template>
  <div>
    <div class="nav">
      <Breadcrumb>
        <BreadcrumbItem>分析</BreadcrumbItem>
        <BreadcrumbItem>医生</BreadcrumbItem>
        <BreadcrumbItem>列表</BreadcrumbItem>
      </Breadcrumb>

      <div class="yab">
        <Tabs value="name1" :animated="false" style="padding: 10px">
          <TabPane label="群体" name="qt">
            <div class="info">
              <div class="box">
                <box title="临床诊断云图" num="新冠肺炎" />
              </div>
              <div class="box">
                <box title="医生嘱托云图" num="多喝水多休息" />
              </div>
              <div class="box">
                <box title="处方付数" num="0" />
              </div>
            </div>
            <div class="info">
              <div class="box">
                <box title="药品数量" num="0" />
              </div>
              <div class="box">
                <vxetable title="医生处方排行" />
              </div>
            </div>
          </TabPane>
          <TabPane label="个体" name="gt">
            <div class="gt">
              <div class="left">
                <Collapse v-model="value" style="width: 220px">
                  <Panel name="1">
                    药品品种
                    <template #content>
                      <div>发散风热药</div>
                      <div>感冒药</div>
                    </template>
                  </Panel>
                </Collapse>
              </div>
              <div class="right">
                <div class="info">
                  <div class="box">
                    <box title="处方量" num="0" />
                  </div>
                  <div class="box">
                    <box title="患者量" num="0" />
                  </div>
                  <div class="box">
                    <box title="平均处方金额" num="20.00" />
                  </div>
                </div>
                <div class="info">
                  <div class="box">
                    <box title="常用药品云图" num="0" />
                  </div>
                  <div class="box">
                    <box title="临床诊断云图" num="0" />
                  </div>
                  <div class="box">
                    <box title="医生嘱托云图" num="0" />
                  </div>
                </div>
                <div class="info">
                  <div class="box">
                    <box title="处方付数" num="0" />
                  </div>
                  <div class="box">
                    <box title="药品数量" num="0" />
                  </div>
                </div>
              </div>
            </div>
          </TabPane>
          <template #extra>
            <DatePicker
              type="daterange"
              split-panels
              placeholder="自定义时间范围"
              style="width: 300px"
            ></DatePicker>
            <Button
              style="
                background-color: #f0f0f0;
                margin-left: 10px;
                font-size: 12px;
              "
              >今天</Button
            >
            <Button
              style="
                background-color: #f0f0f0;
                margin-left: 10px;
                font-size: 12px;
              "
              >昨天</Button
            >
            <Button
              style="
                background-color: #f0f0f0;
                margin-left: 10px;
                font-size: 12px;
              "
              >本周</Button
            >
            <Button
              style="
                background-color: #f0f0f0;
                margin-left: 10px;
                font-size: 12px;
              "
              >本月</Button
            >
            <Button
              style="
                background-color: #f0f0f0;
                margin-left: 10px;
                font-size: 12px;
              "
              >本年</Button
            >
            <Button
              style="
                background-color: #945635;
                margin-left: 10px;
                color: #ffffff;
                font-size: 12px;
              "
              >自定义时间</Button
            >
          </template>
        </Tabs>
      </div>
    </div>
  </div>
</template>
    
  <script setup>
import box from "../../../../components/box.vue";
import refzzt from "../../../../components/refzzt.vue";
import vxetable from "../../../../components/vxetable.vue";
</script>
    
    <style scoped>
.nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
}
.info {
  display: flex;
}
.box {
  height: 360px;
  background-color: #ffffff;
  flex: 1;
  margin-bottom: 20px;
  margin-right: 20px;
}
.gt {
  display: flex;
}
.left {
  float: left;
  background-color: #f5f7f9;
}
.right {
  width: 100%;
  padding-left: 20px;
}
</style>